import Top from '@/components/Top/top';
import Center from '@/components/Center/Center';
import Centerc from '@/components/Centerc/Centerc';
import Centerr from '@/components/Centerr/Centerr';
import CenterL from '@/components/CenterL/CenterL';
import backgroundImg from '@/assets/12.gif'; // 导入背景图片
const HomePage: React.FC = () => {
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column', // 垂直布局，顶部在上，主体区域在下
        backgroundColor: '#f0f8ff', // 设置淡蓝色背景（备用）
        backgroundImage: `url(${backgroundImg})`, // 设置背景图片
        backgroundSize: 'cover', // 背景图片填充整个容器
        backgroundPosition: 'center', // 背景图片居中
        backgroundRepeat: 'no-repeat', // 背景图片不重复
        minHeight: '100vh', // 确保最小高度为100vh
        margin: 0,
        padding: 0,
      }}
    >
      {/* 顶部部分 */}
      <Top />

      {/* 主体内容部分 */}
      <div
        style={{
          display: 'flex',
          flex: 1, // 占据剩余的空间
        }}
      >
        {/* 左侧区域（Center） */}
        <div
          style={{
            width: '25%', // 左侧区域宽度占 30%
            padding: '0px',
            height: '100%', // 高度撑满剩余空间
            marginRight: '0px', // 左右区域之间的间距
            marginLeft: '35px'
          }}
        >
          <Center />
        </div>
        {/* 中间区域 */}
        <div
          style={{
            width: '40%',
            padding: '0px',
            height: '90vh',
            position: 'relative',  // 父容器设置为相对定位
          }}
        >
            {/* 第一个组件 */}
            <div 
              style={{
              position: 'absolute',  // 设置为绝对定位
              top: '0px',           // 根据需要调整与第一个组件的重叠部分
              left: '-50px',
              width: '120%',         // 宽度可以根据需要调整
              marginTop: '-20px'
            }}>
              <Centerc />
            </div>
            <div 
              style={{
              position: 'absolute',  // 设置为绝对定位
              top: '53vh',           // 根据需要调整与第一个组件的重叠部分
              left: '40px',
              width: '100%',         // 宽度可以根据需要调整
            }}>
              <Centerr />
            </div>
        </div>

        <div
          style={{
            width: '35%', 
            padding: '0px',
            height: '100%', // 高度撑满剩余空间
            marginRight: '0px', // 左右区域之间的间距
            marginLeft: '0px'
          }}
        >
          <CenterL />
        </div>

      </div>
      
    </div>
  );
};

export default HomePage;
